<template>
	<div id="sportConfig">
		<div class="breadcrumb">
			<img src="../../../../static/img/outClass_icon_1.png" class="head_img">
			<span class="title">运动管理</span>
		</div>

		<div class="list">
			<div class="list_head">
				<span class="head_name">运动设置列表</span>
			</div>
			<el-table :data="list">
				<el-table-column prop="campus" label="校区" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="maleDayUpper" label="每日计入成绩上限（男）">
				</el-table-column>
				<el-table-column prop="maleMinSingleDis" label="单次跑步最低要求（男）">
				</el-table-column>
				<el-table-column prop="femaleDayUpper" label="每日计入成绩上限（女）">
				</el-table-column>
				<el-table-column prop="femaleMinSingleDis" label="单次跑步最低要求（女）">
				</el-table-column>
				<el-table-column prop="speedLimit" label="跑步配速（分钟/公里）">
				</el-table-column>
				<el-table-column label="跑步有效时间">
					<template scope="scope">
						<span v-if="scope.row.randomValidTime.length<1">全天</span>
						<span v-else class="effecttime" v-for="item in scope.row.randomValidTime" :key="item">{{item}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="isSequence" label="点位顺序跑">
				</el-table-column>
				<el-table-column width="100" align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click="edit(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: []
			};
		},
		mounted() {
			this.getConfigList();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//配置列表
			getConfigList() {
				this.list = [];
				let url = this.$util.domain + "/managerapi/v1/sportconfig/list";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						rootUnid: this.user.rootUnid
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let configList = response.data.data;
						if (configList && configList.length > 0) {
							for (let i = 0; i < configList.length; i++) {
								let $index = i + 1,
									$maleDayUpper = configList[i].maleDayUpper / 1000,
									$maleMinSingleDis = configList[i].maleMinSingleDis / 1000,
									$femaleDayUpper = configList[i].femaleDayUpper / 1000,
									$femaleMinSingleDis = configList[i].femaleMinSingleDis / 1000,
									$campus = configList[i].zoneName,
									$unid = configList[i].unid,
									$speedLimit = configList[i].speedLimit + "",
									$randomValidTime = configList[i].randomValidTime,
									$isSequence = configList[i].isSequence == 0 ? "未开启" : "已开启";

								let speedLimit_min = $speedLimit.slice(0, $speedLimit.indexOf("-")) * 1;
								let speedLimit_max = $speedLimit.slice($speedLimit.indexOf("-") + 1) * 1;
								let speedLimit_minSec = parseInt((speedLimit_min - parseInt(speedLimit_min)) * 60);
								speedLimit_minSec = speedLimit_minSec > 0 ? speedLimit_minSec + "″" : "";
								let speedLimit_maxSec = parseInt((speedLimit_max - parseInt(speedLimit_max)) * 60);
								speedLimit_maxSec = speedLimit_maxSec > 0 ? speedLimit_maxSec + "″" : "";
								$speedLimit = parseInt(speedLimit_min) + "′" + speedLimit_minSec +
									" 至 " + parseInt(speedLimit_max) + "′" + speedLimit_maxSec;

								if ($randomValidTime && $randomValidTime.length > 0) {
									$randomValidTime = $randomValidTime.map((item) => {
										let now = new Date().format("yyyy/MM/dd");
										let start = new Date(now + " " + item.startTime).format("hh:mm");
										let end = new Date(now + " " + item.endTime).format("hh:mm");
										return start + "-" + end;
									});
								}

								this.list.push({
									unid: $unid,
									index: $index,
									campus: $campus,
									speedLimit: $speedLimit,
									isSequence: $isSequence,
									maleDayUpper: $maleDayUpper,
									femaleDayUpper: $femaleDayUpper,
									randomValidTime: $randomValidTime,
									maleMinSingleDis: $maleMinSingleDis,
									femaleMinSingleDis: $femaleMinSingleDis
								});
							}
						}
					}
				});
			},
			edit(row) {
				location.href = `/#/newConfig?unid=${row.unid}`;
			}
		}
	};
</script>

<style scoped>
	#sportConfig {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	.effecttime {
		display: inline-block;
		width: 100%;
		height: 20px;
		line-height: 20px;
		margin-top: 5px;
	}
</style>